<template>
  <div
    id="shutter"
    ref="shutter"
  >
    <template v-if="carouselData.length">
      <div class="shutter-img">
        <a
          v-for="shutter in carouselData"
          @click="showDetail(shutter.newsId)"
          :key="shutter"
          :data-shutter-title="shutter.title"
          href="javascript:;"
        ><img
          :src="shutter.src"
        ></a>
      </div>
      <p class="shutter-btn">
        <a
          href="javascript:;"
          class="prev jeicon jeicon-arrow-right"
        /><a
          href="javascript:;"
          class="next jeicon jeicon-arrow-right"
        />
      </p>
      <div class="shutter-desc">
        <p
          v-for="shutter in carouselData"
          :key="shutter"
        >
          {{ shutter.title }}
        </p>
      </div>
    </template>
    <p
      v-else
      class="nodata"
    >
      <img
        src="../../assets/images/je-nodata.png"
        alt=""
        srcset=""
      >
      <span>暂无数据</span>
    </p>
  </div>
</template>

<script>
import { fetchCarousel } from '../../common/portal';
import { EventBus } from '../../common/eventBus';
import { COMMON } from '../../common/params';

require('./velocity.js');
require('./shutter.js');

export default {
  name: 'Carousel',
  props: {
    mhId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      carouselData: [],
    };
  },
  mounted() {
    this.getImg();
  },
  methods: {
    showDetail(id) {
      EventBus.$emit(COMMON.NEWSDEATIL, id);
    },
    async getImg() {
      const carouselData = new Promise((async (resolve, reject) => {
        this.carouselData = await fetchCarousel({ JE_MHXW_MH_ID: this.mhId });
        if (this.carouselData.length) {
          this.$emit('loadImg', false);
          resolve(this.carouselData);
        } else {
          if (this.carouselData.length == 0) {
            this.$emit('loadImg', false);
          }
          reject(this.carouselData);
        }
      }));
      carouselData.then(() => {
        $(() => {
          $('#shutter').shutter({
            shutterW: '100%', // 容器宽度
            shutterH: 240, // 容器高度
            isAutoPlay: true, // 是否自动播放
            playInterval: 3000, // 自动播放时间
            curDisplay: 0, // 当前显示页
            fullPage: false, // 是否全屏展示
          });
        });
      },
      () => {
        console.log('请求失败');
      });
    },
  },
};
</script>>
<style lang="scss" scoped>
#shutter {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  height:240px;
  .nodata{
    background: #fff;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #999;
  }
}
.shutter-img {
  z-index: 1;
}
.shutter-img,
.shutter-img a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.shutter-img a {
  cursor: default;
}
.shutter-img a > img {
  width: 100%;
  height: 100%;
}
.shutter-img .created {
  overflow: hidden;
  position: absolute;
  z-index: 20;
}
.shutter-img a:hover{
  cursor: pointer;
}
.shutter-btn a {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  cursor: pointer;
  text-decoration: none;
  background: #666;
  opacity: 0.5;
  color: #fff;
  border-radius: 50%;
  font-size:20px;
  text-align: center;
  line-height: 50px;
}
.shutter-btn a.prev {
  left: 20px;
  transform: rotate(180deg);
}
.shutter-btn a.next {
  right: 20px;
}
.shutter-desc {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 36px;
  background: rgba(64,73,82,.5);
}
.shutter-desc p {
  padding-left: 20px;
  line-height: 36px;
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height:36px;
  width:100%;
}
</style>
